<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>书城</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.0/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light my-nav">
    <a class="navbar-brand" href="#">书城欢迎你</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        </ul>
        <a href="javascript:(0)" class="text-danger" style="font-size: 18px;">退出登录</a>
    </div>
</nav>
<div class="down-warp">
    <!--  小导航  -->
    <nav aria-label="breadcrumb" class="my-bnav">
        <ol class="breadcrumb m-3 my-breadcrumb">
            <li class="breadcrumb-item" value="1">图书商城</li>
            <li class="breadcrumb-item" value="2"><a href="#">我的购物车</a></li>
            <li class="breadcrumb-item" value="3"><a href="#">我的订单</a></li>
        </ol>
    </nav>
    <div class="operate-warp">
        <div class="book-warp" style="width: 1200px;margin: 0 auto;display: block;">
            <div class="toolbar d-inline-flex" style="margin-left: 45px">
                <span><input type="text" class="form-control" id="b-name-SStr"></span>
                <span style="margin-left: 12px"><button type="button" class="btn btn-outline-primary" onclick="search_by_SStr()">搜索书籍</button></span>
                <span style="margin-left: 12px"><input type="text" class="form-control" id="c-name-SStr" ></span>
                <span style="margin-left: 12px"><button type="button" class="btn btn-outline-primary" onclick="search_by_SStr()">按分类</button></span>
            </div>
            <div class="container mt-3">
                <div class="row">
                    <div class="col">
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m002.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <div>分类:&nbsp;计算机</div>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m007.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m007.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m005.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m004.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m007.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m005.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                        <div class="card mb-3" style="width: 15rem;">
                            <img src="../img/m004.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">这是一本富含智慧的书籍</p>
                                <a href="#" class="btn btn-primary">加入购物车</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shopping-cart-warp" style="width: 1200px;margin: 0 auto;display: none;">
            <div id="shopping-cart-toolbar">
                <button type="button" class="btn btn-primary" onclick="shopping_cart_op(0,'refresh')">刷新</button>
                <button type="button" class="btn btn-success" onclick="shopping_cart_op(0,'pay')">付款</button>
            </div>
            <table id="shopping-cart-table">

            </table>
        </div>
        <div class="order-user-warp" style="width: 1200px;margin: 0 auto;display: none;">
            <div id="order-user-toolbar">
                <button type="button" class="btn btn-primary" onclick="order_user_op(0,'refresh')">刷新</button>
            </div>
            <table id="order-user-table">

            </table>
        </div>
    </div>
</div>
<!-- 订单详细信息模态框 -->
<div class="modal fade" id="order-detail-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="order-detail-modal-title">订单详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body order-detail-modal-body">
                <table id="order-detail-table">

                </table>
            </div>
            <div class="modal-footer order-detail-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap-4.6.0/js/bootstrap.js" type="module" charset="utf-8"></script>
<script src="../bootstrap-table/bootstrap-table.js" type="module" charset="utf-8"></script>
<script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js" type="module" charset="utf-8"></script>
<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
</html>
